<template>
  <el-form class="rejectDialog">
    <el-dialog
      :visible.sync="isVisible"
      title="驳回备注"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="false"
      @close="closeDialog"
      width="460px"
    >
      <el-form :model="form">
        <div v-for="(item,index) in rejectReson" @click="chooseReason(index)" :key="index">
          <el-form-item>
            <h3>{{item.title}}</h3>
            <p>{{item.tips}}</p>
            <el-divider></el-divider>
            <i class="el-icon-check" v-show="index==list"></i>
          </el-form-item>
        </div>
        <el-form-item>
          <el-input
            type="textarea"
            v-model="form.remarks"
            placeholder="手动输入驳回理由..."
            @focus="inputFun"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-divider></el-divider>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="rejectRemark">确 定</el-button>
      </div>
    </el-dialog>
  </el-form>
</template>
<script>
export default {
  name: "remarkDialog",
  props: {
    isShow: Boolean,
    rowId: ""
  },
  data() {
    return {
      dialogFormVisible: false,
      isVisible: this.isShow,
      form: {
        remarks: ""
      },
      list: 0,
      rejectReson: [
        {
          title: "您提供的角色名或区服查询不到",
          tips:
            "可能您提交返利后修改了游戏角名导致角色名有误或是您提供的区服有误，请检查角色名和区服，可在备注说明后重新提交。"
        },
        {
          title: "返利提交申请时间过期",
          tips: "可能由于您提交的返利超过可申请时间导致无法发放。"
        },
        {
          title: "未达到返利发放要求",
          tips: "可能由于您提交的返利没有达到申请，详情联系客服咨询。"
        },
        {
          title: "您申请的游戏没有返利",
          tips: "个别GM游戏无返利但可申请线下道具。"
        }
      ],
      remarkType: 1,
      remark:
        "可能您提交返利后修改了游戏角名导致角色名有误或是您提供的区服有误，请检查角色名和区服，可在备注说明后重新提交。"
    };
  },
  methods: {
    closeDialog() {
      this.$emit("closeDialog");
    },
    chooseReason(index) {
      this.list = index;
      this.remark = this.rejectReson[index].tips;
    },
    inputFun() {
      this.list = -1;
    },
    rejectRemark() {
      if (this.list >= 0 && this.list <= 3) {
        this.remarkType = 1;
      } else {
        this.remarkType = 2;
        this.remark = this.form.remarks;
      }
      let rowList = {
        roId: this.rowId,
        remarkType: this.remarkType, //1.默认种类  2.自定义
        remark: this.remark
      };
      this.$emit("rejectRemark", rowList);
      this.isVisible = false;
    }
  }
};
</script>
<style lang="scss">
.rejectDialog {
  .el-dialog__header {
    border-bottom: 1px solid #d5d5e8;
    text-align: center;
    margin-bottom: 12px;
  }
  .el-dialog__title {
    color: #4d4f5c;
    font-weight: 500;
  }
  .el-divider--horizontal {
    margin: 12px 0;
  }
  .el-dialog__body {
    padding-top: 0;
    color: #4d4f5c;
    letter-spacing: 1px;
    h3 {
      font-size: 13px;
      padding: 0 10px;
    }
    p {
      font-size: 11px;
      padding: 0 10px;
      color: #a6a7ad;
      line-height: 18px;
      margin-top: 4px;
    }
  }
  .el-form {
    .el-textarea {
      padding: 0 10px;
      box-sizing: border-box;
    }

    .el-textarea__inner {
      height: 53px;
      border: 0;
      resize: none;
      padding: 5px 0;
      color: #a5a4bf;
      font-size: 13px;
    }
  }
  .el-dialog__footer {
    text-align: center;
  }
  .el-form-item__content {
    position: relative;
    line-height: 15px;
  }
  .el-form-item__content > i {
    position: absolute;
    right: -10px;
    top: 25%;
    color: #67c23a;
    font-size: 24px;
    font-weight: 600;
  }
}
</style>